<script setup>
import 'maptalks/dist/maptalks.css'
import * as maptalks from 'maptalks'
import { onMounted } from 'vue'

// 1.初始化地图
onMounted(() => {
  const map = new maptalks.Map('map', {
    center: [120.2548881, 30.2568753],
    zoom: 12,
    baseLayer: new maptalks.TileLayer('base', {
      urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
      subdomains: ['a', 'b', 'c', 'd'],
      attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
    })
  })
  //  1.可以不按照类别修改lineWidth从文件中加载官网 GeoJSON 数据
  // async function loadGeoJSON() {
  //   try {
  //     const response = await fetch('public/pipe.geojson')
  //     const data = await response.json()
  //     console.log('data', data)
  //     // 将 GeoJSON 数据解析为 MapTalks 图层，遍历 features 并根据管道长度设置 lineWidth
  //     const features = data.features
  //       .map(feature => {
  //         if (feature.geometry.type === 'LineString') {
  //           value = parseFloat(feature.properties.管道长度)
  //           // 道路名称
  //           return new maptalks.LineString(feature.geometry.coordinates, {
  //             properties: {
  //               value: value
  //             },
  //             symbol: {
  //               lineColor: '#ff0000',
  //               lineWidth: {
  //                 type: 'calculate-interpolate',
  //                 // 新增name是用来查找expression的变量的
  //                 name: 'lineWidth',
  //                 property: 'value',
  //                 // value: lineWidth,
  //                 // stops: [
  //                 //   ['坎红线', ['+', 'lineWidth', 10]],
  //                 //   ['和丰三路', ['+', 'lineWidth', 20]]
  //                 // ],
  //                 // stops[0][1] stops[1][1]
  //                 // 为什么 expression: ['+', 'lineWidth', 10]有的时候可以调用evaluateCalculateInterpolateFunction
  //                 expression: ['+', 'lineWidth', 10],
  //                 default: 1
  //               }
  //             }
  //           })
  //         }
  //         return null // 只处理 LineString 类型
  //       })
  //       .filter(feature => feature !== null)

  //     const vectorLayer = new maptalks.VectorLayer('vector', features)
  //     map.addLayer(vectorLayer)
  //   } catch (error) {
  //     console.error('Error loading GeoJSON:', error)
  //   }
  // }
  // loadGeoJSON()
  // 1.拿管道的数据
  fetch('public/pipe.geojson')
    .then(function (res) {
      console.log(res)
      return res.json()
    })
    .then(function (json) {
      // 获取或者创建一个图层
      const layer = new maptalks.VectorLayer('vectorLayer').addTo(map)
      // 在这里处理json数据，例如绘制管道
      json.features.forEach(function (feature) {
        console.log('Feature:', feature)
        const coordinates = feature.geometry.coordinates
        const value = feature.properties.道路名称
        const lineWidth = feature.properties.管道长度
        const line = new maptalks.LineString(coordinates, {
          properties: {
            value: value,
            lineWidth: lineWidth
          },
          symbol: {
            // lineColor: {
            //   type: 'color-interpolate',
            //   property: 'value',
            //   stops: [
            //     [0, 'red'],
            //     [50, 'yellow'],
            //     [100, 'red']
            //   ]
            // },
            lineWidth: {
              type: 'calculate-interpolate',
              property: 'lineWidth',
              stops: ['+', ['*', 'lineWidth', 10], 0.2]
            },
            // property: 'value',
            lineJoin: 'round', // miter, round, bevel
            lineCap: 'round', // butt, round, square
            lineDasharray: null, // dasharray, e.g. [10, 5, 5]
            lineOpacity: 1 // 去掉多余的空格
          }
        })

        // 将line对象添加到图层中
        layer.addGeometry(line)
      })
    })
    .catch(function (error) {
      console.error('Error:', error)
    })
  // 2.拿人口的数据
  // fetch('public/population.json')
  //   .then(function (res) {
  //     console.log(res)
  //     return res.json()
  //   })
  //   .then(function (json) {
  //     console.log('populationjson', json)
  //   })
  // 2.加载线
  // const line = new maptalks.LineString(
  //   [
  //     [120.2548881, 30.2568753],
  //     [129.2548881, 30.2568753]
  //   ],
  //   {
  //     arrowStyle: null,
  //     arrowPlacement: 'vertex-last',
  //     visible: true,
  //     editable: true,
  //     cursor: null,
  //     draggable: false,
  //     dragShadow: false,
  //     drawOnAxis: null,
  //     symbol: {
  //       lineColor: '#1bbc9b',
  //       lineWidth: {
  //         type: 'calculate-interpolate',
  //         // 新增name是用来查找expression的变量的
  //         name: 'lineWidth',
  //         // lineWidth的初始值
  //         // features[0].properties.管道长度
  //         value: 20,
  //         // lineWidth计算表达式
  //         expression: ['+', ['*', 'lineWidth', 0.5], 10]
  //         // 测试数据1：['+', ['*', 'lineWidth', 0.5], 10]
  //         // 测试数据2：['+',  'lineWidth', 0.5]
  //         // 测试数据3：['+', 6, 0.5]
  //         // 当值value为负值或者空的时候，lineWidth会为0或者nan，这是默认设置的
  //       },
  //       lineDx: {
  //         type: 'calculate-interpolate',
  //         name: 'lineDx',
  //         // lineWidth的初始值
  //         // value: 29,
  //         // lineWidth计算表达式
  //         value: -20,
  //         expression: ['+', 'lineDx', 0.5],
  //         // 测试数据1：['+', ['*', 'lineWidth', 0.5], 10]
  //         // 测试数据2：['+',  'lineWidth', 0.5]
  //         // 测试数据3：['+', 6, 0.5]
  //         default: 100
  //       },
  //       lineOpacity: {
  //         type: 'calculate-interpolate',
  //         // lineOpacity属性的名字
  //         name: 'lineOpacity',
  //         // lineOpacity的初始值
  //         value: 2.3,
  //         // lineOpacity计算表达式
  //         expression: ['+', 'lineOpacity', 0.2]
  //         // 测试数据1：['+', ['*', 'lineOpacity', 0.5], 0.2]
  //         // 测试数据2：['+', 'lineOpacity', 0.2]
  //         // 测试数据3：['+', 0.5, 0.2]
  //       }
  //     }
  //   }
  // )
  // new maptalks.VectorLayer('vector11', line).addTo(map)
  // 3.加载颜色插值
  // const layer = new maptalks.VectorLayer('v').addTo(map)
  // Bug已解决：json为什么加载不出来:改成放在public里面
  // fetch('public/population.json')
  //   .then(function (res) {
  //     return res.json()
  //   })
  //   .then(function (json) {
  //     const points = []
  //     let max = -Infinity
  //     json.forEach(function (d) {
  //       const x = d[0],
  //         y = d[1],
  //         // 修改颜色放在这里
  //         value = d[2]
  //       max = Math.max(value, max)
  //       const point = new maptalks.Marker([x, y], {
  //         // property 的作用是指定 Marker 的某个属性用于颜色插值
  //         properties: {
  //           value: value
  //         },
  //         symbol: {
  //           markerWidth: 2,
  //           markerHeight: 2,
  //           markerType: 'ellipse',
  //           markerFill: {
  //             type: 'color-interpolate',
  //             property: 'value',
  //             stops: [
  //               [0, 'green'],
  //               [50, 'yellow'],
  //               [360, 'red']
  //             ]
  //           },
  //           markerLineWidth: 0
  //         }
  //       })
  //       points.push(point)
  //     })
  //     layer.addGeometry(points)
  //     console.log(max)
  //     // 控制台输出mark
  //     // window.maptalks = maptalks
  //     // console.log(window.maptalks)
  //   })
  // console.log('map', map)
  // 4.加载面
  // const rect = new maptalks.Rectangle([-0.143049, 51.598568], 4250, 3000, {
  //   symbol: {
  //     polygonFill: 'rgb(135,196,240)',
  //     polygonOpacity: {
  //       type: 'calculate-interpolate',
  //       name: 'polygonOpacity',
  //       // polygonOpacity的初始值
  //       value: 0.5,
  //       // polygonOpacity计算表达式
  //       // 1.stops不能用，修改判断条件
  //       expression: ['+', 'polygonOpacity', 0.2]
  //       // 测试数据1：['+', ['*', 'polygonOpacity', 0.5], 0.2]
  //       // 测试数据2：['+', 'polygonOpacity', 0.2]
  //       // 测试数据3：['+', 0.5, 0.2]
  //     },
  //     lineColor: '#1bbc9b',
  //     lineWidth: 6,
  //     lineJoin: 'round', //miter, round, bevel
  //     lineCap: 'round', //butt, round, square
  //     lineDasharray: null, //dasharray, e.g. [10, 5, 5]
  //     'lineOpacity ': 1
  //   }
  // })
  // new maptalks.VectorLayer('vectorRect', rect).addTo(map)
  // 5.编辑文本
  // const textbox = new maptalks.TextBox(
  //   'This is a textbox, with very long content', // content
  //   [-0.113049, 51.498568], // coordinate
  //   200, // width
  //   90, // height
  //   {
  //     draggable: true,
  //     textStyle: {
  //       wrap: true, // auto wrap text
  //       padding: [12, 8], // padding of textbox
  //       verticalAlignment: 'top',
  //       horizontalAlignment: 'right',
  //       // 加入
  //       symbol: {
  //         textFaceName: 'monospace',
  //         textFill: '#34495e',
  //         textHaloFill: '#fff',
  //         textHaloRadius: 4,
  //         textSize: {
  //           type: 'calculate-interpolate',
  //           name: 'textSize',
  //           // polygonOpacity的初始值
  //           value: 10,
  //           // polygonOpacity计算表达式
  //           expression: ['+', 'textSize', 0.2]
  //           // 测试数据1：['+', ['*', 'polygonOpacity', 0.5], 0.2]
  //           // 测试数据2：['+', 'polygonOpacity', 0.2]
  //           // 测试数据3：['+', 0.5, 0.2]
  //         },
  //         textWeight: 'bold'
  //       }
  //     },
  //     boxSymbol: {
  //       // box's symbol
  //       markerType: 'square',
  //       markerFill: 'rgb(135,196,240)',
  //       markerFillOpacity: 0.9,
  //       markerLineColor: '#34495e',
  //       markerLineWidth: 1
  //     }
  //   }
  // )

  // new maptalks.VectorLayer('vectorTextbox', textbox).addTo(map)
  // startEdit()

  // function startEdit() {
  //   textbox.startEdit()
  // }

  // function endEdit() {
  //   textbox.endEdit()
  // }
})
</script>

<template>
  <div id="map" class="container"></div>
</template>

<style scoped>
html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
}
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>
